<template>
	<view
		v-show="vk.getVuex('toExamine')"
		class="bg-gradient-to-b from-blue-50 to-white flex flex-col items-center justify-center min-h-screen p-6"
	>
		<!-- 顶部标题 -->
		<view class="mb-8 text-center">
			<text class="text-4xl font-bold text-blue-900">📝 配置挪车信息</text>
		</view>

		<view class="flex flex-col w-full gap-4">
			<view class="text-xl font-bold">🔢手机号码:</view>
			<u-input v-model="phoneNumber" type="number" placeholder="请输入手机号码!!" border height="80" />
			<view class="text-xl font-bold">🚗车牌号:</view>
			<view class="relative">
				<u-input v-model="value" placeholder="请输入车牌号!!" disabled border height="80" />
				<view class="absolute inset-0 z-50 w-full h-full bg-transparent" @click="showKeyboard('xmKeyboard')"></view>
			</view>

			<view class="flex items-center justify-between text-xl font-bold">
				<text>🔠SPT: </text>
				<text class="font-normal text-sm" @click="show_spt = !show_spt">
					如何获取
					<u-icon name="arrow-down"></u-icon>
				</text>
			</view>
			<u-input v-model="spt" height="80" placeholder="请输入SPT!!" border />
			<!--  -->
			<view class="text-xl font-bold">🔔提示内容:</view>
			<u-input v-model="content" type="textarea" placeholder="请输入提示内容!!" border height="100" />
			<button
				@click="id ? submit(2) : submit(1)"
				class="rounded-xl flex items-center justify-center w-full py-4 font-semibold text-white transition-all duration-300 bg-blue-600 shadow-lg"
			>
				<text class="mr-2 text-2xl">{{ id ? '🔃' : '✅' }}</text>
				<text>{{ id ? '更新信息' : '保存信息' }}</text>
			</button>
		</view>
		<!-- 组件 -->
		<!-- 组件 -->
		<!-- 组件 -->
		<xm-keyboard-v2 ref="xmKeyboard" @confirm="(v) => (value = v)"></xm-keyboard-v2>
		<view class="cu-modal bottom-modal" style="z-index: 33" @click="show_spt = false" :class="show_spt ? 'show' : ''">
			<view class="cu-dialog" @click.stop>
				<view class="cu-bar justify-end bg-white">
					<view class="content">
						<text class="text-xl">获取SPT</text>
					</view>
					<view class="action" @tap="show_spt = false">
						<text class="cuIcon-close text-blue-600"></text>
					</view>
				</view>

				<view class="padding-xl grid gap-4" style="overflow-y: scroll !important; max-height: 60vh">
					<view class="w-full text-left">1️⃣:直接扫描下面二维码 ， 或者长按识别二维码 ，即可获取你的推送SPT</view>
					<view class="border border-blue-100 rounded-md overflow-hidden">
						<image
							src="https://wxpusher.zjiecode.com/api/qrcode/RwjGLMOPTYp35zSYQr0HxbCPrV9eU0wKVBXU1D5VVtya0cQXEJWPjqBdW3gKLifS.jpg"
							mode="widthFix"
							lazy-load
							show-menu-by-longpress
							@click.stop="
								preview(
									'https://wxpusher.zjiecode.com/api/qrcode/RwjGLMOPTYp35zSYQr0HxbCPrV9eU0wKVBXU1D5VVtya0cQXEJWPjqBdW3gKLifS.jpg'
								)
							"
						/>
					</view>
					<view class="w-full text-left">2️⃣:复制SPT</view>
					<view class="border border-blue-100 rounded-md overflow-hidden">
						<image
							mode="widthFix"
							lazy-load
							show-menu-by-longpress
							@click.stop="preview('https://mp-d3585fd7-be7f-4dd8-9abf-6423d5d4519e.cdn.bspapp.com/微信图片_20250210145512.png')"
							src="https://mp-d3585fd7-be7f-4dd8-9abf-6423d5d4519e.cdn.bspapp.com/微信图片_20250210145512.png"
						></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phoneNumber: '',
			spt: '',
			content: '',
			value: '',
			show_spt: true,
			id: '',
		};
	},
	onLoad() {
		// let { phoneNumber, spt, content } = vk.getVuex('$user.userInfo');
		// this.content = content;
		// this.spt = spt;
		// this.phoneNumber = phoneNumber;
		this.getList();
	},
	methods: {
		preview(url) {
			uni.previewImage({
				// current: [url],
				urls: [url],
				loop: true,
				longPressActions: true,
			});
		},
		// 车牌号确认
		showKeyboard(ref) {
			this.$refs[ref].toShow(this.value);
		},
		async submit(type) {
			if (!this.phoneNumber) {
				return vk.toast('请输入手机号码', 'none');
			}

			if (!this.value) {
				return vk.toast('请输入车牌号', 'none');
			}
			if (!this.spt) {
				return vk.toast('请输入SPT', 'none');
			}
			if (!this.content) {
				return vk.toast('请输入提示内容', 'none');
			}
			if (type == 1) {
				vk.callFunction({
					url: 'client/pub.index.savecar',
					title: '提交中...',
					data: {
						phoneNumber: this.phoneNumber,
						spt: this.spt,
						content: this.content,
						value: this.value,
						_id: vk.getVuex('$user.userInfo._id'),
					},
					success: (res) => {
						vk.alert(res.msg, '提示', () => {
							vk.navigateBack();
						});
					},
				});
			} else {
				vk.callFunction({
					url: 'client/pub.index.updatacar',
					title: '更新中...',
					data: {
						phoneNumber: this.phoneNumber,
						spt: this.spt,
						content: this.content,
						value: this.value,
						_id: this.id,
					},
					success: (res) => {
						vk.alert(res.msg, '提示', () => {
							vk.navigateBack();
						});
					},
				});
			}
		},

		async getList() {
			vk.callFunction({
				url: 'client/pub.index.findcar',
				title: '加载中...',
				data: {
					_id: vk.getVuex('$user.userInfo._id'),
				},
				success: (res) => {
					this.phoneNumber = res.data.phoneNumber;
					this.spt = res.data.spt;
					this.content = res.data.content;
					this.value = res.data.value;
					this.id = res.data._id;
				},
			});
		},
	},
};
</script>
